<template>
  <button class="openModalBtn" @click="addStudent">添加学生</button>
  <button class="openModalBtn" @click="delSelectedStudent">删除</button>
  <div>
    <input
      v-model.trim="searchKeyword"
      class="keyword"
      name="keyword"
      placeholder="Search by name"
      type="text"
    />
    <button class="searchBtn" type="button" @click="generateSearchData">搜索</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'addStudent', add: void): void
  (e: 'delSelectedStudent', del: void): void
  (e: 'generateSearchData', gen: void): void
  (e: 'Keyword', key: string): void
}>()

const searchKeyword = ref('')

const addStudent = () => {
  emit('addStudent')
}
const delSelectedStudent = () => {
  emit('delSelectedStudent')
}
const generateSearchData = () => {
  emit('Keyword', searchKeyword.value)
}
</script>

<style></style>
